<template>
  <HomeLayout>
    <!-- 课程信息选项卡 -->
    <van-tabs v-model="tabActiveName">
      <van-tab
        title="作业"
        name="1"
      >
        <homework-list :homework-list="homeworkList" />
      </van-tab>
      <van-tab
        title="资料"
        name="2"
      >
        <resourse-list />
      </van-tab>
    </van-tabs>

  </HomeLayout>
</template>

<script>
import HomeLayout from '@/views/layout/HomeLayout.vue'

import { Tabs, Tab } from 'vant'
import HomeworkList from './components/HomeworkList.vue'
import { listByCourse } from '@/api/bussiness/homework/homework'
import DateHelper from '@/utils/date'
import ResourseList from './components/ResourseList'

export default {
  name: 'CourseDetail',
  components: {
    HomeLayout,
    HomeworkList,
    ResourseList,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs
  },
  data () {
    return {
      tabActiveName: '1', // tab激活名称
      listLoading: false, // list是否处于加载状态
      listFinish: true, // list是否加载完数据
      courseInfo: {
        id: 111,
        courseName: ''
      },
      homeworkList: [] // 作业列表
    }
  },
  created () {
    // 注册路由参数watch
    this.$watch(() => this.$route.query.courseId, (val) => {
      this.courseInfo.id = val
      // 获取作业列表数据
      this.refreshHomeWorkList(val)
    }, { immediate: true })
    this.$watch(() => this.$route.params.courseName, (val) => {
      if (val) {
        this.courseInfo.courseName = val
        this.$route.meta.title = val
      }
    }, { immediate: true })
  },
  methods: {
    refreshHomeWorkList (courseId) { // 获取作业数据
      listByCourse(courseId).then(({ data }) => {
        this.homeworkList = data
        this.homeworkList.forEach(hw => {
          const { startTime, endTime } = hw
          const nTime = DateHelper.toDateTimeStr(new Date())
          if (endTime < nTime) {
            // 标记作业已结束
            hw.status = 2
          } else if (nTime < startTime) {
            // 标记作业未开始
            hw.status = 0
          } else {
            // 标记作业正在进行
            hw.status = 1
          }
        })
      }).catch(() => { })
    }
  }
}
</script>

<style>
</style>
